<template>
    <view class="goods-item" >
      <!-- 左侧图片区 -->
      <view class="i1-left">
        <radio @click="redioChage" :checked="goods.goods_state" color="#c00000" v-if="showRedio"></radio>
        <image :src="goods.goods_small_logo || defaultPic" mode=""></image>
      </view>
      <!-- 右侧信息栏 -->
      <view class="i1-right">
        <view class="text">
          {{goods.goods_name}}
        </view>
        <view class="shop-num">
          
        <view class="jiage">
          ￥{{goods.goods_price | toFixed}}
        </view>
        <uni-number-box @change="numChangeHandler" v-if="showNum" :min="1" :value="goods.goods_count"></uni-number-box>
        </view>
      </view>
    </view>
</template>

<script>
  export default {
    name:"my-goods",
    props: {
      goods: {
        type: Object,
        default: {}
      },
      showNum: {
        type: Boolean,
        default: false
      },
      showRedio: {
        type: Boolean,
        default: false
      }

    },
    data() {
      return {
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',

      };
    },
    methods: {
      numChangeHandler(newVal){
        this.$emit('num-change',{
          goods_id: this.goods.goods_id,
          goods_count: +newVal
        })
      },
      redioChage() {
        this.$emit('change-redio',{
          goods_id: this.goods.goods_id,
          goods_state: !this.goods.goods_state
        })
      }
    },
    filters: {
      toFixed(num){
        return Number(num).toFixed(2)
      }
    }
  }
</script>

<style lang="scss">
 
    .goods-item {
      display: flex;
      border-bottom: 2px solid #000000;
      margin: 5px 10px;
      .i1-left {
        display: flex;
        align-items: center;
        margin-right: 10px;
        image {
          width: 100px;
          height: 100px;
        }
      }
      .i1-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 12px;
        .text {}
        .shop-num {
          display: flex;
          // flex: 1;
          justify-content: space-between;
        .jiage {
          color: #ff5500;
        }
        uni-number-box {
          
        }
        }
      }
    }
  
</style>
